<template>
	<view class="uni-flex-column content">
		<view style="flex: 1;overflow: scroll">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<uni-list class="list" v-for="(item, key) in dataList" :key="key">
					<uni-list-item class="list-item list-box" :showArrow="false" :key="key" @click="onClickItem(item)"> 
						<view class="list-box">
							<view class="list-text">
								<p class="list-text-title">{{item.subject}}</p>
								<p class="list-text-p">发送人:&nbsp;&nbsp;{{item.ownerName}}
									<span style="color: #000000;float: right;">{{item.createTime | formatDate('yyyy-MM-dd HH:mm')}}</span>
								</p>
							 
								<p class="list-text-status">
									<uni-tag inverted :type="item.messageType=='system'?'primary':'warning'" :text="item.messageType | optionsFilter(messageOptions)"></uni-tag>
								</p>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
			</mescroll-body>		
		</view>
	</view>
</template>

<script>
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import { getMsgList, getUnreadMessage } from '@/api/common.js'
	import { business } from '@/utils/common.js'
	import constants from '@/utils/constants.js'
	
	export default {
		mixins: [MescrollMixin],
		components: {
			uniList,
			uniListItem,
			MescrollBody,
			MescrollUni,
			uniTag
		},
		onLoad() {
			
		},
		onShow() {
			business.refreshMsgCount()
		},
		data() {
			return {
				dataList: [],
				messageOptions: constants.messageOptions
			}	
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				var params = {
					
				}
				const pager = {
					start: page.num,
					limit: page.size
				}
				getMsgList(pager, params).then(res =>{
					let curPageData = res.data.dataResult;
					let curPageLen = curPageData.length; 
					let totalSize = res.data.pageResult.totalCount;
					if(page.num == 1){
						//如果是第一页需手动置空列表
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			
			// 点击列表查看详情
			onClickItem(item) {
				// uni.navigateTo({
				// 	url: '/pages/notice/detail?noticeId='+item.id
				// })
			}
		}
	}
</script>

<style lang="scss">	
	page {
		background: $uni-bg-color-grey;
	}

	.content {
		font-size: $uni-font-size-base;
		background-color: $uni-bg-color-grey;
	
		.list {
			margin-top: 20upx;
	
			.list-box {
				display: flex;
				flex-direction: row;
	
				.list-image {
					height: 140upx;
					width: 140upx;
					margin-top: 6rpx;
				}
	
				.list-text {
					padding-left: 18upx;
					width: calc(100% - 200upx);
	
					.list-text-title {
						font-size: $uni-font-size-lg;
						margin-bottom: 4upx;
						min-height: 50upx;
						width: 80%;
					}
	
					.list-text-p {
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						overflow: hidden;
						overflow: hidden;
						display: block;
						margin-bottom: 4rpx;
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
						line-height: 50upx;
					}
	
					.list-text-status {
						font-size: $uni-font-size-base;
						position: absolute;
						right: 20upx;
						top: 32upx;
						line-height: 30upx;
					}
				}
			}
		}
	}
	
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}
</style>
